每個組件只能回傳一個元素 (物件)，他不能同時回傳多個元素

說明： 代表一個元素，如果沒有用把三個元素包進一個元素裡，程式會報錯 ( javaScript本身的語法限制)

function App() {
  
  return (
   //<div>
    <MyComponent />
    <MyComponent />
    <MyComponent />
    //</div> 
  )
}

不過在html中沒有額外功能，所以在react中可以允許單純使用<></>來包裹元素

附圖：html內不會有多餘的div元素

這種空標籤<></>稱為Fragment，也可以算是一種 javaScript的物件

可以利用 { } 在html中寫javaScript，而也可以在裡面寫函數，

function MyComponent(){
  return <h1>你好</h1>
} 
  
function App() {
  const text = 'hello world';

  return (
   <>
    <h1>{text.toUpperCase()}</h1> //將text轉成大寫的函數
    <MyComponent />
    <MyComponent />
    <MyComponent />
    </> 
  )
}

在html當中，空元素的斜線是可有可無的。但在JSX中，空元素必須要有斜線。也可以在html應用{}

如：

<input type="text" placeholder={text}/>

在JSX中，有些屬性因為在JavaScript中為關鍵字，所以命名會和JavaScript中不太一樣

例如html中的class，在JSX中會命名為className；html中的for，在JSX中會命名為htmlFor（駝峰式命名法）。

有時候會在JSX中看到使用兩個大括號 {{ }}，是在JSX中使用物件。常見為寫在style屬性中 (把css屬性名跟屬性值寫在物件裡)。此方法是利用JavaScript物件來模擬css的一種方式

• 在css語法寫法：

{
	background-color: red;
}

• JSX模擬css的寫法：

  <h1 style={{backgroundColor: 'red'}}>{text.toUpperCase()}</h1> 

而這種直接在html標籤裡面寫css的方式叫做 inline css，通常更常見的方式是獨立css的檔案(App.css)，將App.css的內容導入App.jsx當中。能夠導入是因為vite協助把css檔案插入到html當中 ( 正常在JavaScript裡這樣導入會報錯)。

也可以在React中寫事件處理，以點擊按鈕(button)的事件處理為例：

• 直接把回調函數寫在button裡面

  <button 事件種類={function(){回調函數}}>我是按鈕
  

• 把回調函數寫在外面，大括號內只放函數名
  

學習影片出處：https://youtu.be/aBTiZfShe-4?si=Igb2aKz3sefA97A5